﻿
<%@ page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title>Enjoy</title>
<link rel="Stylesheet" href="/pension/styles/default.css" />

</head>
<style type="text/css">
#backBox {
	background-color: #000000;
}

#bigBox {
	background-color: #fff600;
	width: 1000px;
	margin: auto;
}

#sBox {
	width: 301px;
	height: 304px;
}

#imgBox {
	width: 780px;
	margin: auto;
}
</style>
<script type="text/Javascript">
	function togglecontent(id) {
		var word = document.getElementById('word' + id);
		var img = document.getElementById('img' + id);

		if (word.style.display == 'none') {
			word.style.display = 'inline';
			img.style.display = 'none';
		} else {
			word.style.display = 'none';
			img.style.display = 'inline';
		}
	}
</script>
<body>

	<%
		pageContext.include("/WEB-INF/views/include/header.jsp");
	%>

	<div id="pageContainer">
	<br /><br /><br /><br /><br /><br /><br /><br />
	<div id="bigBox">
	
	
			<table width="903px" border="0" cellpadding="0" cellspacing="0"
				align="center">
				<tr>
					<td><div onclick="togglecontent(1)">
							<!--내용-->
							<div id="word1" style="display: none">
								<div id="sBox">
									<table
										style="background-image: url(../image/bg01.png); width: 301px; height: 304px;">
										<tr>
											<td align="center" valign="middle">노래방<br /> <br />
												休펜션에는 연인과 가족들이 즐길 수 있는<br /> 노래방 시설이 준비되어 있습니다.
											</td>
										</tr>
									</table>
								</div>
							</div>
							<!--내용끝-->
							<img id="img1" src="../image/enjoy1.jpg" />
						</div></td>
					<td><div onclick="togglecontent(2)">
							<!--내용-->
							<div id="word2" style="display: none">
								<div id="sBox">
									<table
										style="background-image: url(../image/bg02.png); width: 301px; height: 304px;">
										<tr>
											<td align="center" valign="middle">자전거 무료대여<br /> <br />
												자전거를 타고 休펜션 주변의 시골 풍경을<br /> 구경하시고 강변을 따라 상쾌한 홍천강의<br />
												바람을 몸으로 느끼며<br />
										</tr>
									</table>
								</div>
							</div>
							<!--내용끝-->
							<img id="img2" src="../image/enjoy2.jpg" />
						</div></td>
					<td><div onclick="togglecontent(3)">
							<!--내용-->
							<div id="word3" style="display: none">
								<div id="sBox ">
									<table
										style="background-image: url(../image/bg03.png); width: 301px; height: 304px;">
										<tr>
											<td align="center" valign="middle">탁구 치기<br /> <br />
												똑딱 똑딱 사랑이 오가는 탁구를<br /> 즐기실 수 있도록 준비해 두었습니다.
											</td>
										</tr>
									</table>
								</div>
							</div>
							<!--내용끝-->
							<img id="img3" src="../image/enjoy3.jpg" />
						</div></td>
				</tr>

				<tr>
					<td><div id="enjoybox" onclick="togglecontent(4)">
							<!--내용-->
							<div id="word4" style="display: none">
								<div style="width: 301px; height: 304px;">
									<table
										style="background-image: url(../image/bg4.png); width: 301px; height: 304px;">
										<tr>
											<td align="center" valign="middle">보트타기<br /> <br />
												펜션강에서 타실 수 있게<br /> 고무보트를 빌려드립니다.
											</td>
										</tr>
									</table>
								</div>
							</div>
							<!--내용끝-->
							<img id="img4" src="../image/enjoy4.jpg" />
						</div></td>
					<td><div id="enjoybox">
							<!--내용끝-->
							<img src="../image/enjoy_title.jpg" />
						</div></td>
					<td>
						<div id="enjoybox" onclick="togglecontent(5)">
							<!--내용-->
							<div id="word5" style="display: none">
								<div style="width: 301px; height: 304px;">
									<table
										style="background-image: url(../image/bg5.png); width: 301px; height: 304px;">
										<tr>
											<td align="center" valign="middle">보드게임 <br /> <br />
												休펜션 카페나 객실에서<br /> 즐기실 수 있도록<br /> 다양한 보드게임을 준비해 두었습니다.
											</td>

										</tr>
									</table>
								</div>
							</div>
							<!--내용끝-->
							<img id="img5" src="../image/enjoy5.jpg" />
						</div>
					</td>
				</tr>

				<tr>
					<td><div id="enjoybox" onclick="togglecontent(6)">
							<!--내용-->
							<div id="word6" style="display: none">
								<div style="width: 301px; height: 304px;">
									<table
										style="background-image: url(../image/bg6.png); width: 301px; height: 304px;">
										<tr>
											<td align="center" valign="middle">농구하기 <br /> <br />
												키의 크기에 따라 높이 조절 할 수 있는<br /> 사랑의 슛 농구대를 준비해 두었습니다.
											</td>
										</tr>
									</table>
								</div>
							</div>
							<!--내용끝-->
							<img id="img6" src="../image/enjoy6.jpg" />
						</div></td>
					<td><div id="enjoybox" onclick="togglecontent(7)">
							<!--내용-->
							<div id="word7" style="display: none">
								<div style="width: 301px; height: 304px;">
									<table
										style="background-image: url(../image/bg7.png); width: 301px; height: 304px;">
										<tr>
											<td align="center" valign="middle">족구&amp;배드민턴<br /> <br />
												벨리 뒷편에 족구장 겸<br /> 배드민턴장이 있습니다.
											</td>
										</tr>
									</table>
								</div>
							</div>
							<!--내용끝-->
							<img id="img7" src="../image/enjoy7.jpg" />
						</div></td>
					<td><div id="enjoybox" onclick="togglecontent(8)">
							<!--내용-->
							<div id="word8" style="display: none">
								<div style="width: 301px; height: 304px;">
									<table
										style="background-image: url(../image/bg8.png); width: 301px; height: 304px;">
										<tr>
											<td align="center" valign="middle">미니족구 <br /> <br />
												休펜션 카페 2층에는 미니축구 기계가 있어<br /> 연인과 재미있는 축구를 즐기실 수 있습니다.
											</td>
										</tr>
									</table>
								</div>
							</div>
							<!--내용끝-->
							<img id="img8" src="../image/enjoy8.jpg" />
						</div></td>
				</tr>
			</table>

		</div>
		<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
	</div>
	<div style="clear: both"></div>
	
	
	
	</div>

</body>
</html>













